<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .adver-wrapper {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            /* right: 5px;
            bottom: 5px; */
        }

        .adver-header {
            line-height: 32px;
            position: relative;
        }

        .adver-header .adver-tips {
            font-size: 12px;
            text-indent: 13px;
        }

        .adver-header .adver-close {
            position: absolute;
            right: 5px;
            top: 0;
        }

        .adver-main img {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- .adver-wrapper>(.adver-header>.adver-tips+.adver-close)+.adver-main -->
    <!-- <div class="adver-wrapper">
        <div class="adver-header">
            <div class="adver-tips">距离广告关闭还有10秒</div>
            <div class="adver-close">x</div>
        </div>
        <div class="adver-main">
            <a href="">
                <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
            </a>
        </div>
    </div> -->
</body>
<script>
    //  小广告
    //  1. 页面加载完毕 等待5s 小广告显示
    //  2. 倒计时10s后关闭小广告
    //  3. 重复1-2
    //  4. 点击关闭按钮 => 清除小广告  => 重复 1 2 3


    // 动态生成小广告
    // 1. 模板字符串创建  -> 优点:可以根据给定的模板快速创建html结构. 缺点: 模板字符串在没有放到页面之前都是字符串类型  -> 不能给字符串绑事件 -> 只能等放到页面之后 在获取元素绑定事件
    // 应用: 商品列表生成

    // 2. DOM节点创建 -> 优点: 创建的元素节点 可以直接修改内容 属性 样式 绑定事件  缺点: 对于复杂的html结构 创建比较耗费时间
    // 应用: 插件(样式已经写好 元素动态生成) -> 引入插件 ->调用方法

    /* 
        <div class="adver-wrapper">
            <div class="adver-header">
                <div class="adver-tips">距离广告关闭还有10秒</div>
                <div class="adver-close">x</div>
            </div>
            <div class="adver-main">
                <a href="">
                    <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
                </a>
            </div>
        </div>
    
    
    */

    adverCreate(4000);

    // adverCreate(1000, {
    //     left: "5px",
    //     top: "5px",
    // });

    // adverCreate(2000, {
    //     right: "5px",
    //     top: "5px",
    // });

    // adverCreate(3000, {
    //     left: "5px",
    //     bottom: "5px",
    // });


    function adverCreate(delayTime, options) {   //对象参数 {left,right,top,bottom} 用于定义广告的位置
        delayTime = delayTime == undefined ? 5000 : delayTime;
        // 如果不传options 默认: { right: "5px", bottom: "5px" } 
        options = options == undefined ? { right: "5px", bottom: "5px" } : options;

        var timer1 = setTimeout(function () {

            var count = 10;


            var adverWrapper = document.createElement("div");
            adverWrapper.setAttribute("class", "adver-wrapper");

            if (options.left) {
                adverWrapper.style.left = options.left;
            }
            if (options.right) {
                adverWrapper.style.right = options.right;
            }
            if (options.top) {
                adverWrapper.style.top = options.top;
            }
            if (options.bottom) {
                adverWrapper.style.bottom = options.bottom;
            }

            // 点击小广告的任何位置 -> 跳转百度
            adverWrapper.onclick = function () {
                window.open("https://www.baidu.com");
            }

            // adverHeader
            var adverHeader = document.createElement("div");
            // adverHeader.setAttribute("class", "adver-header");
            adverHeader.className = "adver-header";
            adverWrapper.appendChild(adverHeader);

            var adverTips = document.createElement("div");
            // adverTips.setAttribute("class", "adver-tips");
            adverTips.className = "adver-tips";
            adverTips.innerText = `距离广告关闭还有${count}秒`;
            adverHeader.appendChild(adverTips);

            var adverClose = document.createElement("div");
            // adverClose.setAttribute("class", "adver-close");
            adverClose.className = "adver-close";
            adverClose.innerText = `x`;
            adverHeader.appendChild(adverClose);

            adverClose.onclick = function (e) {
                adverWrapper.remove();
                clearTimeout(timer1);
                clearInterval(timer2);
                adverCreate(delayTime);

                if (e.stopPropagation) {
                    e.stopPropagation()
                } else {
                    e.cancelBubble = true;
                }


            }

            // adverMain
            var adverMain = document.createElement("div");
            // adverMain.setAttribute("class", "adver-main");
            adverMain.className = "adver-main";
            adverWrapper.appendChild(adverMain);

            var img = document.createElement("img");
            img.setAttribute("src", "../images/bzsc-dgbhz-300-250-7-5.gif");
            img.src = "../images/bzsc-dgbhz-300-250-7-5.gif";
            adverMain.appendChild(img);

            document.body.appendChild(adverWrapper);

            var timer2 = setInterval(function () {
                count--;
                adverTips.innerText = `距离广告关闭还有${count}秒`;
                if (count == 0) {
                    clearInterval(timer2);
                    adverWrapper.remove();
                    adverCreate(delayTime);
                }
            }, 1000)

        }, delayTime)
    }



</script>

</html>